<template>
  <div class="home">
    <div class="img-body">
      <img v-if="isShow" :src="cur_word.images" alt />
    </div>

    <div class="btn-body" v-if="review_word_list.length > 0">
      <button class="start" v-if="isStart===false" @click="start">开始</button>
      <template v-else>
        <button class="repeat" @click="repeat">重复</button>

        <button v-if="isShow === false" class="show" @click="isShow = true">展示</button>
        <template v-else>
          <button class="right" @click="right">答对了</button>
          <button class="wrong" @click="wrong">答错了</button>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from 'axios'

export default {
  name: 'ReviewPage',
  components: {
  },
  data () {
    return {
      index: 0,
      isStart: false,
      isShow: false,
      userInfo: {},
      all_word: JSON.parse(window.localStorage.getItem('all_word')),
      review_word_list: []
    }
  },
  computed: {
    cur_word() {
      return this.review_word_list.length > 0 ? this.review_word_list[this.index] : null
    }
  },
  async created () {
    await this.login()
    await this.getReview()
  },
  mounted() {
  },
  methods: {
    async login () {
      const { data: { data } } = await axios({
        url: process.env.VUE_APP_BASE_API + '/user/login?mobile=15503593230&sms_code=111'
      })
      this.userInfo = data
    },
    async getReview () {
      const { data: { data } } = await axios({
        url: process.env.VUE_APP_BASE_API + '/review/get_review'
      })

      this.review_word_list = data.map(item => {
        const word = this.all_word[item.wordId]
        return { ...word, ...item }
      })
    },
    // 基本功能 ----------------------------------------------------------
    start() {
      this.isStart = true
      this.playAudio()
    },
    next() {
      if (this.index + 1 >= this.review_word_list.length) {
        alert('结束！！！！')
        this.$router.push('/home')
        return
      }
      this.isShow = false
      this.index++
      this.playAudio()
    },
    playAudio() {
      this.$nextTick(() => {
        this.audio = new Audio(this.cur_word.audioWord)
        this.audio.playbackRate = 0.8
        setTimeout(()=> {
          this.audio.play()
        }, 500)
      })
    },
    repeat() {
        setTimeout(()=> {
          this.audio.play()
        }, 500)
    },
    async right() {
      await axios({
        method: 'patch',
        url: process.env.VUE_APP_BASE_API + `/review/update_review?id=${this.cur_word.id}&is_right=true`
      })
      this.next()
    },
    async wrong() {
      await axios({
        method: 'patch',
        url: process.env.VUE_APP_BASE_API + `/review/update_review?id=${this.cur_word.id}&is_right=false`
      })
      this.next()
    },
  }
}
</script>

<style lang="less" scoped>
.img-body {
  width: 100%;
  height: 60vh;
  margin: 2vw 0;
  display: flex;
  justify-content: center;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.btn-body {
  display: flex;
  justify-content: space-around;
  button {
    width: 15vw;
    height: 8vw;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    color: #fff;
  }
  .start {
    background-color: green;
  }
  .right {
    background-color: green;
  }
  .wrong {
    background-color: rgb(220, 53, 69);
  }
  .repeat {
    background-color: hotpink;
  }
  .show {
    background-color: orange;
  }
  .remember {
    background-color: #666;
  }
}
</style>
